<!DOCTYPE html>

<html xmlns:th="http://www.thymeleaf.org">
<meta charset="UTF-8" />
<head>
  <title>Home</title>
  <script src="../js/sockjs.min.js"></script>
  <script src="../js/stomp.js"></script>
  <script src="../js/jquery-3.1.1.js"></script>
</head>
<body>
<p>
  聊天室
</p>

<form id="wiselyForm">
  <textarea rows="4" cols="60" name="text"></textarea>
  <input type="submit"/>
</form>

<script th:inline="javascript">
  $('#wiselyForm').submit(function(e){
    e.preventDefault();
    var text = $('#wiselyForm').find('textarea[name="text"]').val();
    sendSpittle(text);
  });

  var sock = new SockJS("/endpointChat"); //1
  var stomp = Stomp.over(sock);
  stomp.connect('guest', 'guest', function(frame) {
    stomp.subscribe("/user/queue/notifications", handleNotification);//2
  });

  function handleNotification(message) {
    $('#output').append("<b>Received: " + message.body + "</b><br/>")
  }

  function sendSpittle(text) {
    stomp.send("/chat", {}, text);//3
  }
  $('#stop').click(function() {sock.close()});
</script>

<div id="output"></div>
</body>
</html>